<template>
  <div>
    <h3 @click="say">Content组件 -- {{ msg }}</h3>
  </div>
</template>

<script>
export default {
  name: "Content",
  data() {
    return {}
  },
  /**
   * 1.setup是一个新的组件选项(?), 组合API的起点, 将来的组合API的代码, 基本上都写在这里
   * 2.从组件生命周期来看: 在beforeCreate钩子执行前执行, 组件创建前,
   * 3.setup函数中不能使用 this ==> undefined, 所以无法调用组件中的data和method
   * 4.模板中需要使用的数据和函数, 需要在setup中返回!!!
   *
   * #
   * 选项理解: Vue2.0时, 使用 this.$options 获取当前Vue实例的初始化选项 -->  options选项
   */
  setup() {
    console.log('setup', this)  // setup undefined

    // 数据
    const msg = 'hi vue3.0';
    // 函数
    const say = (e) => {
      console.log(e.target, 'hi vue3.0')
    }

    // 必须需要 return 返回!!!
    return {
      msg,
      say
    }
  },
  beforeCreate() {
    console.log('beforeCreate')
  }
}
</script>

<style scoped>

</style>
